<template>
  <q-dialog class="add-edit-station-dialog dialog" v-model="show" persistent>
    <q-card v-drag style="min-width: 800px;">
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">{{title}}</div>
        <q-btn
          style="font-size: 18px;color: white"
          flat round dense
          class="iconfont icontubiao-67 close-btn dialog"
          @click="hideDialog"
        >
        </q-btn>
      </q-card-section>

      <!-- loading 新建网关时候显示 -->
      <Loading v-if="initLoading"/>

      <!-- 步骤指示条 -->
      <Steps v-if="!step" :value="currentStep" :controllerType="controllerType" style="margin-top: 20px"/>

      <!-- 新建网关 -->
      <NewGateway v-if="currentStep === 1"
                  @hideDialog="hideDialog"
                  @successSubmit="successNewGateWay"
                  @failedSubmit="failedNewGateWay"
                  :products="products"/>

      <!-- 驱动设置 -->
      <DriverConfig v-if="currentStep === 2"
                    :selectDriverInfo="selectDriverInfo"
                    :driverParams="driverParams"
                    @successSubmit="successDriverConfig"
                    @hideDialog="hideDialog" />

      <!-- 点位设置 -->
      <PointDialog v-if="currentStep === 3"
                   :deviceIds="deviceIds"
                   :driverConfigData="driverConfigData"
                   :driverParams="driverParams"
                   :isCompete="isCompete"
                   :products="products"
                   @hideDialog="hideDialog"
                   @bindNone="currentStep=4"
                   @successSubmit="successPointConfig" />

      <!-- 网关设置 -->
      <ConfigGateway v-if="currentStep === 4"
                     @hideDialog="hideDialog"
                     @successSubmit="successConfigGateway"
                     :driverParams="driverParams"
                     @loading="initLoading = true"
                     :lanInfo="lanInfo"
                     :mobileConf="mobileConf"
                     :isCompete="isCompete"
                     @bindNone="successConfigGateway"
                     @hideLoading="initLoading=false" />
    </q-card>
  </q-dialog>
</template>

<script>

import Steps from '../gateway-dialog/steps'
import NewGateway from './new-gateway'
import DriverConfig from './driver-config'
import PointDialog from './point-config'
import ConfigGateway from './config-gateway'
import Loading from '../gateway-dialog/loading'
import { mapGetters } from 'vuex'

export default {
  components: {
    NewGateway,
    Steps,
    DriverConfig,
    PointDialog,
    ConfigGateway,
    Loading
  },
  name: 'index',
  props: {
    controllerType: {
      type: String,
      default: ''
    },
    step: {
      type: Number,
      default: 0
    },
    lanInfo: {
      type: Object,
      default: () => {}
    },
    detailDriverParams: {
      type: Object,
      default: () => {}
    },
    selectDriverInfo: {
      type: Object,
      default: () => {}
    },
    deviceIds: {
      type: Array,
      default: () => []
    },
    products: {
      type: Array,
      default: () => []
    },
    mobileConf: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.initData()
      }
    },
    step (val) {
      if (val) {
        this.currentStep = val
      }
    },
    detailDriverParams: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val) {
          this.driverParams.ucloudBoxNum = val?.ucloudBoxNum ? val.ucloudBoxNum : ''
          this.driverParams.gatewayId = val?.gatewayId ? val.gatewayId : ''
          this.driverParams.productId = val?.productId ? val.productId : ''
          this.driverParams.productName = val?.productName ? val.productName : ''
          this.driverParams.gatewaySN = val?.gatewaySN ? val.gatewaySN : ''
          this.driverParams.subDeviceId = val?.subDeviceId ? val.subDeviceId : ''
          this.driverParams.boxNum = val?.boxNum ? val.boxNum : ''
          this.driverConfigData.driverName = val?.driverName ? val.driverName : ''
        }
      }
    }
  },
  data () {
    return {
      show: false, // 弹框的显示与隐藏
      currentStep: 1,
      initLoading: false,
      driverParams: {},
      driverConfigData: {}
    }
  },
  computed: {
    ...mapGetters([
      'client'
    ]),
    isCompete () {
      return this.step === 2 || this.step === 4
    },
    title () {
      const titleObj = {
        '1': '新建网关',
        '2': '驱动配置',
        '3': '点位配置',
        '4': '网关配置'
      }
      return titleObj[this.currentStep] || '部署'
    }
  },
  methods: {
    // 初始化数据
    initData () {
      if (this.step) {
        this.currentStep = this.step
      } else {
        this.currentStep = 1
      }
    },
    // 显示弹框
    showDialog () {
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
      this.$emit('close')
    },

    // 新建网关提交成功
    successNewGateWay (data) {
      this.currentStep = 2
      this.driverParams = data
    },

    // 配置驱动成功
    successDriverConfig (data) {
      this.currentStep = 3
      this.driverConfigData = data
      this.$emit('driverSuccess')
    },

    // 点位设置成功
    successPointConfig (deviceIds) {
      if (deviceIds && deviceIds.length) {
        this.$emit('changeDeviceIds', deviceIds)
      }
      // 如果是从第二部编辑来的话,点位设置完成就结束了
      if (this.step === 2) {
        this.$emit('successAll')
        this.show = false
        return
      }
      this.currentStep = 4
    },

    // 网关配置完成
    successConfigGateway () {
      this.$message.success('配置完成')
      this.$emit('successAll')
      this.initLoading = false
      this.show = false
    },

    failedNewGateWay () {
      this.currentStep = 1
    }
  }
}
</script>

<style scoped>

</style>
